<template>
    <div>
        <div class="crumbs">
            <div class="container" style="justify-content: space-between;min-height: 800px;">
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="24" :md="5" :lg="5">
                        <div class="l-left" style="height:auto;border: 1px solid #eee;">
                        <div style="line-height: 60px;font-size: 18px;font-weight:500;border-bottom: 1px dashed #eee;">
                            <i class="el-icon-menu"/>字典分项
                        </div>
                        <el-tree :data="subData" default-expand-all   ref="vueTree" :props="defaultProps" node-key="id"  :default-checked-keys="[clickId]" highlight-current @node-click="handleNodeClick" @node-expand="handleNodeClick">
                        </el-tree>

                    </div>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="19" :lg="19">
                        <div class="content-show" style="border: 1px solid #eee;">
                       <div style="line-height: 60px;font-size: 18px;font-weight:500;border-bottom: 1px dashed #eee;"><i class="el-icon-menu"/>字典列表</div>
                        <div class="handle-box" style="margin:10px 10px;">
                            <el-button type="primary" @click="add">新增</el-button>
                            <el-button type="success" @click="editCount">修改</el-button>
                        </div>
                        <el-table
                                :data="tableData"
                                border
                                expand-on-click-node
                                stripe class="table"
                                @selection-change="handleSelectionChange"
                                ref="multipleTable"
                                style="width: 100%">
                            <el-table-column type="selection" width="55" align="center"></el-table-column>

                            <el-table-column
                                    prop="dicName"
                                    sortable
                                    label="字典名称"
                                    align="center"
                                    >
                            </el-table-column>
                            <el-table-column
                                    prop="dicValue"
                                    label="对应值"
                                    align="center"
                                    >
                            </el-table-column>
                            <el-table-column
                                prop="status"
                                label="字典状态"
                                align="center"
                                >
                            </el-table-column>
                            <el-table-column
                                    prop="createActor"
                                    label="创建人"
                                    align="center"
                                   >
                            </el-table-column>
                            <el-table-column
                                    prop="createTime"
                                    label="创建时间"
                                    align="center"
                                    :formatter="formatTime"
                                  >
                            </el-table-column>
                            <el-table-column
                                    prop="dicOperation"
                                    label="操作"
                                    align="center"
                                    >
                                <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.status=='1'?'禁用':'启用'}}</el-button>
                                </template>

                            </el-table-column>
                        </el-table>
                    </div>
                    </el-col>
                </el-row>
            </div>
        </div>
<!--        新增弹出框-->
        <el-dialog :title="diologTitle" :visible.sync="addVisible" width="70%">
            <el-form :model="form"  ref="Form" label-width="100px">
                <el-form-item label="字典类型" class="limit-width">
                    <el-select v-model="form.type"  placeholder="请选择">
                        <el-option
                                v-for="item in selectValue"
                                :key="item.value"
                                :label="item.label"
                                :value="isEditInfo ? parseInt(item.value):item.value">
<!--                                :value="item.value">-->

                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="字典名称" class="limit-width">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="对应值" class="limit-width" >
                    <el-input v-model="form.value"></el-input>
                </el-form-item>
                <el-form-item label="备注" style="" class="limit-width">
                    <el-input type="textarea" :autosize="{ minRows:3, maxRows: 4}" v-model="form.remarks"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {getDictionData,getDictionList,addDiction,dicEdit} from  '../../../api/index';
    import {famatDatesTimes,regNumber} from '../../common/com';
    export default {
        name: "Dictionary",
        data() {
            return {
                //tree菜单
                subData: [
                    {
                        dicName: '数据字典分项',
                        children: [{
                            dicName: '',
                            children: []
                        }
                        ]
                    }],
                defaultProps: {
                    children: 'children',
                    label: 'dicName',
                    icon: 'el-icon-success',
                },
                //数据字典列表
                tableData: [],
                selectValue: [
                    {
                        value: '0',
                        label: '分项'
                    },
                    {
                        value: '1',
                        label: '子项'
                    },
                ],
                 text: '启用',
                multipleSelection: [],//当前行
                form: {
                    type: '0',
                    value: '',
                    name: '',
                    remarks: '',
                    id: ''
                },
                addVisible: false,
                isEditInfo: false,
                enableVisible: false,
                diologTitle: '新增',
                 clickId:0,
                a:'',

            }
        },
        created() {
            this.getData();
        },

        methods: {
            //点击字典列表禁用启用
            handleClick(row) {
                console.log(row);
                console.log(row.status)
                if(row.status == 1){
                    console.log(row.status)
                    dicEdit({
                        "dicName": row.dicName,
                        "remark": row.remark,
                        "dicType": row.dicType,
                        "dicValue": row.dicValue,
                        "id":row.id,
                        "pid":row.pid,
                        "status":0
                    }).then((res) =>{
                        if (res.success) {
                            this.addVisible=false;
                            this.$message.success(`禁用成功`);
                            this.getList(this.clickId);
                        }else{
                            this.$message.error("禁用失败");
                        }
                    })
                }
                if(row.status == 0){
                    dicEdit({
                        "dicName": row.dicName,
                        "remark": row.remark,
                        "dicType": row.dicType,
                        "dicValue": row.dicValue,
                        "id":row.id,
                        "pid":row.pid,
                        "status":1
                    }).then((res) =>{
                        if (res.success) {
                            this.addVisible=false;
                            this.$message.success(`启用成功`);
                            this.getList(this.clickId);
                        }else{
                            this.$message.error("启用失败");
                        }
                    })
                }
            },
            //点击字典分项获取字典列表
            handleNodeClick(data) {
                 console.log(data);
                this.clickId = data.id;
                this.getList(data.id)
            },
            //获取字典列表
            getList(dicId) {
                getDictionList({
                    pid: dicId
                }).then((res) => {
                    console.log(res)
                    this.tableData = res;
                    console.log(this.tableData)
                })
            },
            //获取字典分项
            getData() {
                //1.点击获取字典分项，渲染tree菜单
                getDictionData({}).then((res) => {
                    console.log(res)
                    this.subData[0].children = res;//渲染tree
                    this.clickId = res[0].id;
                    console.log(this.subData[0].children[0].id)
                    // 2.通过传递tree节点的id获取字典列表的表格数据并渲染表格
                    getDictionList({
                        pid: this.subData[0].children[0].id,//传参
                    }).then((res) => {
                        console.log(res)
                        this.tableData = res;//渲染表格
                        // 3.高亮tree菜单，默认选中第一个
                        this.$nextTick(() => {
                            this.$refs.vueTree.setCurrentKey(this.subData[0].children[0].id); // vueTree 元素的ref   value 绑定的node-key
                        });
                    })
                })
            },
            //选中行
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            //点击保存
            save() {
                console.log(this.clickId)
                console.log(this.isEditInfo)
                console.log(this.form.type)
                console.log(this.formValidate(this.form))
                //修改
                if (this.formValidate(this.form)) {
                    if(this.isEditInfo){
                        console.log(this.multipleSelection[0].dicType)
                       if (this.multipleSelection[0].dicType== 0){
                            dicEdit({
                                "dicName": this.form.name,
                                "remark": this.form.remarks,
                                "dicType": this.form.type,
                                "dicValue": this.form.value,
                                "id":this.multipleSelection[0].id,
                                "pid":this.multipleSelection[0].pid,
                            }).then((res) =>{
                                if (res.success) {
                                    this.addVisible=false;
                                    this.$message.success(`修改成功`);
                                    this.getData();
                                }else{
                                    this.$message.error("修改失败");
                                }
                            })
                        }
                       if (this.multipleSelection[0].dicType== 1){
                           this.form.id = this.clickId,
                               console.log(this.form.id)
                                console.log(this.form)
                           dicEdit({
                               "dicName":this.form.name,
                               "remark": this.form.remarks,
                               "dicType": this.form.dicType,
                               "dicValue": this.form.value,
                               "id":this.multipleSelection[0].id,
                               "pid":this.multipleSelection[0].pid,
                           }).then((res) => {
                               console.log(this.form)
                               if (res.success) {
                                   console.log(res)
                                   this.addVisible = false;
                                   this.$message.success(`修改成功`);
                                   this.getList(this.clickId);
                               } else {
                                   this.$message.error('修改失败');
                               }
                           })
                       }
                         return;
                    }
                    //新增
                    if (this.form.type == 0) {
                            addDiction({
                                "dicName": this.form.name,
                                "remark": this.form.remarks,
                                "dicType": this.form.type,
                                "dicValue": this.form.value

                            }).then((res) => {
                                console.log(this.form)
                                if (res.success) {
                                    console.log(res)
                                    this.addVisible = false;
                                    this.$message.success(`添加成功`);
                                    this.getData();
                                } else {
                                    this.$message.error(res.message);
                                }
                            })
                    }
                    if (this.form.type == 1) {
                         this.form.id = this.clickId,
                            addDiction({
                                "dicName": this.form.name,
                                "remark": this.form.remarks,
                                "dicType": this.form.type,
                                "dicValue": this.form.value,
                                "pid": this.clickId,
                            }).then((res) => {
                                console.log(this.form)
                                if (res.success) {
                                    console.log(res)
                                    this.addVisible = false;
                                    this.$message.success(`添加成功`);
                                    this.getList(this.clickId);
                                } else {
                                    this.$message.error(res.message);
                                }
                            })
                    }
                }
            },

        //点击新增弹出弹出框
        add() {
            this.addVisible = true;
            this.isEditInfo =false;
            this.diologTitle = '新增字典';
            this.form = {
                type: '0',
                value: '',
                name: '',
                remarks: ''
            }
        },
        //点击修改
        editCount() {
            if (this.multipleSelection.length < 1) {
                this.$message.error('请选择需要修改字典');
            } else if (this.multipleSelection.length == 1) {
                console.log(this.form)
                this.diologTitle = '修改字典';
                this.addVisible = true;
                this.isEditInfo = true;
               this.a =this.form.type;
                console.log(this.multipleSelection[0].dicType)
                this.form = {
                    name: this.multipleSelection[0].dicName,
                    type: this.multipleSelection[0].dicType,
                    value: this.multipleSelection[0].dicValue,
                    remarks: this.multipleSelection[0].remark,
                }
            } else {
                this.$message.error('一次只能修改一个字典');
            }
        },
        //时间格式
        formatTime(row, column, cellValue, index) {
            return famatDatesTimes(cellValue);
        },
        //验证
        formValidate(formname) {
            console.log(formname)
            console.log(formname.type && formname.name && formname.value)
            if ((formname.type == '0'||formname.type == '1') && formname.name && (formname.value||formname.value=='0')) {
                if (!regNumber(formname.value)) {
                    this.$message.error("对应值只能填写数字");
                    return false;
                }
                return true;
            } else {
                if (formname.type!='1'&&formname.type!='0') {
                    this.$message.error('请选择类别');
                    return false;
                }
                if (!formname.name) {
                    this.$message.error('请输入名称');
                    return false;
                }
            }
        }
    }

    }
</script>

<style scoped>
    .el-tree{
        margin-top:10px;
    }
</style>